// 3. JS逻辑：
const fill = document.querySelector('.fill')
const empties = document.querySelectorAll('.empty')

// 3.2 作用于 ->被拖放元素的事件：
fill.addEventListener('dragstart', dragStart)
fill.addEventListener('dragend', dragEnd)

// 3.3 作用于 ->目标元素的事件：(意思是给所有 "目标元素" 挨个加上它们对应的拖放事件)
for(const empty of empties) {
  empty.addEventListener('dragover', dragOver)
  empty.addEventListener('dragenter', dragEnter)
  empty.addEventListener('dragleave', dragLeave)

  // 3.4 被拖放的元素在目标元素上同时鼠标放开触发的事件：
  empty.addEventListener('drop', dragDrop)
}

// 3.5 [被拖放元素] 开始拖放触发的事件：
function dragStart() {
  this.className += ' hold' // 当移到 "目标元素" 对应边界范围, 加上一个粗边框...

  // 细节2：通过 className 加上 "invisible" ->主要是为了隐藏元素，同时保留其在页面上的位置和大小...
  setTimeout(() => this.className = 'invisible', 0)
}

// 3.6 当 [拖放元素] 拖放完成后, 对应地, 通过一张背景图进行填充此时的内容：
function dragEnd() {
  this.className = 'fill'
}

function dragOver(e) {
  e.preventDefault() // 细节3：该事件为 ->取消默认行为...
}

function dragEnter(e) {
  e.preventDefault()

  // 3.6 "hovered" 是已经配置的CSS样式 ->意为：当 [拖放元素] 进入 "目标元素" 时,
  // 让 "目标元素" 出现一个 点线边框 的效果...
  this.className += ' hovered'
}

// 3.7 将 [拖放元素] 移动走后(跳出 "目标元素" 边界范围), "目标元素" 此时为空白内容状态：
function dragLeave() {
  this.className = 'empty'
}

// 3.8 此时 [拖放元素] 已经在  "目标元素" 触发范围内, 并且鼠标已经放开触发的事件：
function dragDrop() {
  this.className = 'empty'
  this.append(fill)
}

// 总结：
// 一、拖放元素 |有的事件 ->dragstart、dragend
// 二、目标元素 |有的事件 ->dragover、dragenter、dragleave、drag